<template>
    <div class="byte-change-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 输入区域 -->
            <div class="input-group">
                <div class="input-item">
                    <span>选择单位：</span>
                    <el-select v-model="selectedUnit" placeholder="请选择单位" style="width: 100%;">
                        <el-option
                                v-for="unit in units"
                                :key="unit.value"
                                :label="unit.label"
                                :value="unit.value"
                        />
                    </el-select>
                </div>
                <div class="input-item">
                    <span>输入数值：</span>
                    <el-input
                            v-model="inputValue"
                            placeholder="请输入数值"
                    />
                </div>
            </div>

            <!-- 结果表格 -->
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    style="width: 100%;"
            >
                <el-table-column
                        prop="label"
                        label="单位"
                        width="140"
                        :header-cell-style="{ backgroundColor: '#f0f0f0' }"
                        :cell-style="{ backgroundColor: '#f7f7f7', fontWeight: 'bold' }"
                >
                    <template #default="{ row }">
                        {{ row.label }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="数值"
                >
                    <template #default="{ row }">
                        <el-input
                                v-model="row.value"
                                readonly
                                style="width: 100%;"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 标题和副标题
const title = ref('')
const subtitle = ref('')

// 单位列表
const units = [
    {label: '比特 (b)', value: 'b'},
    {label: '千比特 (Kb)', value: 'Kb'},
    {label: '兆比特 (Mb)', value: 'Mb'},
    {label: '千兆比特 (Gb)', value: 'Gb'},
    {label: '太比特 (Tb)', value: 'Tb'},
    {label: '字节 (B)', value: 'B'},
    {label: '千字节 (KB)', value: 'KB'},
    {label: '兆字节 (MB)', value: 'MB'},
    {label: '千兆字节 (GB)', value: 'GB'},
    {label: '太字节 (TB)', value: 'TB'},
]

// 默认选中单位和输入数值
const selectedUnit = ref('B')
const inputValue = ref('1024')

// 表格数据
const tableData = ref(
    units.map(unit => ({
        label: unit.label,
        value: ''
    }))
)

// 加载标题和副标题
function loadInfo() {
    get(
        '/api/mathTool/getInfo?path=byte_change',
        (data) => {
            if (data) {
                title.value = data.title || ''
                subtitle.value = data.introduction || ''
            }
        },
        (err) => {
            ElMessage.error('获取工具信息失败：' + err)
        }
    )
}

// 防抖请求函数
const fetchResult = debounce(() => {
    const value = inputValue.value?.trim()
    if (!value || isNaN(Number(value))) {
        tableData.value = units.map(unit => ({
            label: unit.label,
            value: ''
        }))
        return
    }

    post('/api/mathTool/getByteChangeResult', {
        type: selectedUnit.value,
        text: value
    }, (res) => {
        if (Array.isArray(res)) {
            tableData.value = res.map(item => ({
                label: item.label,
                value: item.value
            }))
        } else {
            tableData.value = units.map(unit => ({
                label: unit.label,
                value: ''
            }))
            ElMessage.error('返回数据格式错误')
        }
    }, (err) => {
        ElMessage.error('单位转换失败：' + err)
    })
}, 500)

// 监听输入和单位变化
watch([inputValue, selectedUnit], fetchResult)

onMounted(() => {
    loadInfo()
    fetchResult()
})
</script>

<style scoped>
.byte-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    gap: 1rem;
}

.input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-item span {
    margin-bottom: 0.4rem;
    font-weight: 500;
}
</style>